
/* === Global Blue Theme Override ===
   Drop-in stylesheet to apply a consistent blue theme across the site.
   Palette variables let you tweak shades quickly. Place this after your main CSS.
*/
:root{
  --blue-900:#0d47a1; /* deep primary */
  --blue-800:#1565c0;
  --blue-700:#1976d2; /* primary */
  --blue-600:#1e88e5;
  --blue-500:#2196f3; /* accent */
  --blue-100:#e3f2fd; /* light bg */
  --text-strong:#0a1a2b;
  --text-on-dark:#ffffff;
  --muted:#5b6b7c;
  --border:#cfe1f8;
}

/* Base */
html, body{
  background-color: var(--blue-100);
  color: var(--text-strong);
}

/* Links */
a{
  color: var(--blue-700);
  text-decoration-color: var(--blue-600);
}
a:hover, a:focus{
  color: var(--blue-900);
  text-decoration-color: var(--blue-900);
}

/* Headings */
h1, h2, h3, h4, h5, h6{
  color: var(--blue-900);
}

/* Buttons (generic) */
button, .btn{
  background-color: var(--blue-700);
  color: var(--text-on-dark);
  border-color: var(--blue-700);
}
button:hover, .btn:hover{
  background-color: var(--blue-800);
  border-color: var(--blue-800);
}
button:active, .btn:active, .btn:focus{
  background-color: var(--blue-900);
  border-color: var(--blue-900);
  color: var(--text-on-dark);
}

/* Button variants commonly found in templates */
.btn-primary{ background-color: var(--blue-700) !important; border-color: var(--blue-700) !important; color: var(--text-on-dark) !important;}
.btn-primary:hover{ background-color: var(--blue-800) !important; border-color: var(--blue-800) !important;}
.btn-outline-primary{ color: var(--blue-700) !important; border-color: var(--blue-700) !important; background: transparent !important;}
.btn-outline-primary:hover{ color: var(--text-on-dark) !important; background: var(--blue-700) !important; border-color: var(--blue-700) !important;}

/* Navbar / Header */
.navbar, .site-header, header, .nav, .topbar{
  background-color: var(--blue-900) !important;
  color: var(--text-on-dark) !important;
}
.navbar a, .site-header a, .nav a{
  color: var(--text-on-dark) !important;
}
.navbar a:hover, .site-header a:hover, .nav a:hover{
  color: #f1f5ff !important;
}

/* Footer */
footer, .site-footer{
  background-color: var(--blue-900) !important;
  color: var(--text-on-dark) !important;
}
footer a{ color:#dce8ff !important; }
footer a:hover{ color:#ffffff !important; }

/* Cards / Panels */
.card, .panel, .box, .feature, .service, .pricing, .blog-card{
  border-color: var(--border) !important;
  background: #ffffff !important;
}
.card .card-header, .panel .panel-heading{
  background: linear-gradient(180deg, var(--blue-100), #ffffff);
  border-bottom-color: var(--border) !important;
}

/* Section accents */
.section-title, .highlight, .badge, .label, .tag{
  background-color: var(--blue-500) !important;
  color: var(--text-on-dark) !important;
  border-color: var(--blue-500) !important;
}

/* Forms */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], textarea, select{
  border-color: var(--border) !important;
}
input:focus, textarea:focus, select:focus{
  border-color: var(--blue-600) !important;
  box-shadow: 0 0 0 0.2rem rgba(33,150,243,.15) !important;
}

/* Alerts / notices */
.alert-primary, .notice, .info{
  background: #f0f7ff !important;
  border-color: var(--blue-600) !important;
  color: var(--text-strong) !important;
}

/* Tables */
table thead th{
  background: var(--blue-900) !important;
  color: var(--text-on-dark) !important;
  border-color: var(--blue-900) !important;
}
table tbody tr:nth-child(even){
  background: #f7fbff !important;
}

/* Progress / loaders */
.progress-bar, .loading, .spinner > div{
  background-color: var(--blue-700) !important;
}

/* Utility classes that might exist */
.bg-primary{ background-color: var(--blue-700) !important; color: var(--text-on-dark) !important;}
.text-primary{ color: var(--blue-700) !important;}
.border-primary{ border-color: var(--blue-700) !important;}
.badge-primary{ background-color: var(--blue-700) !important; color: var(--text-on-dark) !important;}


/* === Button System — Blue, Unified Across Site === */
:root{
  --btn-bg: var(--blue-700);
  --btn-bg-hover: var(--blue-800);
  --btn-bg-active: var(--blue-900);
  --btn-text: var(--text-on-dark);
  --btn-outline: var(--blue-700);
  --btn-radius: 9999px; /* pill by default */
  --btn-pad-y: .75rem;
  --btn-pad-x: 1.25rem;
  --btn-font-weight: 600;
  --btn-shadow: 0 6px 14px rgba(25,118,210,.25);
  --btn-shadow-hover: 0 8px 18px rgba(25,118,210,.33);
}
/* Normalize all button-like elements */
button,
.btn,
[class*="btn-"],
a.button,
a.btn,
input[type="button"],
input[type="submit"],
input[type="reset"],
.site-btn,
.theme-btn,
.cta-btn,
.primary-btn,
.readmore,
.more,
.wp-block-button__link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap:.5rem;
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  border: 1px solid var(--btn-bg) !important;
  border-radius: var(--btn-radius) !important;
  padding: var(--btn-pad-y) var(--btn-pad-x) !important;
  font-weight: var(--btn-font-weight) !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: var(--btn-shadow) !important;
  transition: transform .1s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease !important;
  cursor: pointer !important;
}
/* Hover / focus */
button:hover,
.btn:hover,
[class*="btn-"]:hover,
a.button:hover,
a.btn:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
.site-btn:hover,
.theme-btn:hover,
.cta-btn:hover,
.primary-btn:hover,
.readmore:hover,
.more:hover,
.wp-block-button__link:hover{
  background: var(--btn-bg-hover) !important;
  border-color: var(--btn-bg-hover) !important;
  box-shadow: var(--btn-shadow-hover) !important;
  transform: translateY(-1px);
}
button:active,
.btn:active,
[class*="btn-"]:active,
a.button:active,
a.btn:active,
input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active{
  background: var(--btn-bg-active) !important;
  border-color: var(--btn-bg-active) !important;
  transform: translateY(0);
}
/* Focus visible for accessibility */
button:focus-visible,
.btn:focus-visible,
a.button:focus-visible,
a.btn:focus-visible,
input[type="button"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="reset"]:focus-visible{
  outline: 3px solid rgba(25,118,210,.35) !important;
  outline-offset: 2px !important;
}
/* Disabled */
button[disabled], .btn.disabled, .disabled,
input[type="button"][disabled],
input[type="submit"][disabled],
input[type="reset"][disabled]{
  background: #b4c9ef !important;
  border-color: #b4c9ef !important;
  color: #fff !important;
  opacity: .7 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}
/* Outlines → blue outline */
.btn-outline, .btn-outline-primary, .outline, .btn-line, .ghost-btn{
  background: transparent !important;
  color: var(--blue-700) !important;
  border-color: var(--btn-outline) !important;
  box-shadow: none !important;
}
.btn-outline:hover, .btn-outline-primary:hover, .outline:hover, .btn-line:hover, .ghost-btn:hover{
  background: var(--blue-700) !important; color: #fff !important; border-color: var(--blue-700) !important;
}
/* Size variants */
.btn-lg, .large, .is-large, .wp-block-button__link.is-style-fill{
  padding: calc(var(--btn-pad-y) + .25rem) calc(var(--btn-pad-x) + .5rem) !important;
  font-size: 1.05rem !important;
}
.btn-sm, .small, .is-small{
  padding: calc(var(--btn-pad-y) - .25rem) calc(var(--btn-pad-x) - .25rem) !important;
  font-size: .9rem !important;
}
/* Convert any green variants to blue look */
.btn-success, .success, .btn-green, .whatsapp, .call, .btn-teal{
  background: var(--btn-bg) !important;
  border-color: var(--btn-bg) !important;
  color: var(--btn-text) !important;
}
/* Floating action buttons (e.g., phone/WhatsApp) */
.floating, .float, .sticky-call, .sticky-chat, .whatsapp, .call{
  position: fixed;
  width: 56px; height: 56px;
  border-radius: 50% !important;
  right: 18px; bottom: 18px;
  background: var(--btn-bg) !important;
  color: var(--btn-text) !important;
  box-shadow: var(--btn-shadow) !important;
  z-index: 999;
}
.floating:hover, .float:hover, .sticky-call:hover, .sticky-chat:hover, .whatsapp:hover, .call:hover{
  background: var(--btn-bg-hover) !important;
  box-shadow: var(--btn-shadow-hover) !important;
}
/* Ensure button icons inherit color */
button i, .btn i, a.button i, a.btn i, .wp-block-button__link i{ color: currentColor !important; }



/* === Icons, Badges & Labels Unified in Blue === */

/* General icons (Font Awesome, Bootstrap, etc.) */
i, .icon, .fa, .fas, .far, .fal, .fab,
.icon-box i, .service-icon, .feature-icon, .social-icon {
  color: var(--blue-700) !important;
  transition: color .2s ease, transform .2s ease;
}
a:hover i, .icon:hover, .service-icon:hover, .feature-icon:hover, .social-icon:hover {
  color: var(--blue-900) !important;
  transform: scale(1.05);
}

/* Badges & labels */
.badge, .label, .tag, .pill, .category, .status, .highlight {
  display: inline-block;
  padding: 0.35em 0.65em;
  font-size: 0.85em;
  font-weight: 600;
  line-height: 1;
  color: var(--text-on-dark) !important;
  background-color: var(--blue-700) !important;
  border: 1px solid var(--blue-700) !important;
  border-radius: 9999px !important;
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Hover states */
.badge:hover, .label:hover, .tag:hover, .pill:hover, .category:hover, .status:hover {
  background-color: var(--blue-800) !important;
  border-color: var(--blue-800) !important;
}

/* Specific variants that used to be green */
.badge-success, .label-success, .tag-green, .tag-success {
  background-color: var(--blue-700) !important;
  border-color: var(--blue-700) !important;
  color: var(--text-on-dark) !important;
}

/* Notification dots or counts */
.badge-counter, .notification-badge, .cart-count {
  background-color: var(--blue-700) !important;
  color: var(--text-on-dark) !important;
  border-radius: 50% !important;
  min-width: 1.25rem;
  height: 1.25rem;
  font-size: 0.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}



/* === Form Controls Unified in Blue === */

/* Inputs already styled with borders in blue in earlier pass */

/* Checkboxes */
input[type="checkbox"] {
  accent-color: var(--blue-700);
}
input[type="checkbox"]:focus {
  outline: 2px solid rgba(25,118,210,.35);
  outline-offset: 2px;
}

/* Radio buttons */
input[type="radio"] {
  accent-color: var(--blue-700);
}
input[type="radio"]:focus {
  outline: 2px solid rgba(25,118,210,.35);
  outline-offset: 2px;
}

/* Range sliders */
input[type="range"]::-webkit-slider-thumb {
  background: var(--blue-700);
}
input[type="range"]::-moz-range-thumb {
  background: var(--blue-700);
}
input[type="range"]::-ms-thumb {
  background: var(--blue-700);
}
input[type="range"]::-webkit-slider-runnable-track {
  background: var(--blue-100);
}
input[type="range"]::-moz-range-track {
  background: var(--blue-100);
}
input[type="range"]::-ms-track {
  background: var(--blue-100);
}

/* Select dropdowns */
select {
  border: 1px solid var(--blue-700) !important;
}
select:focus {
  border-color: var(--blue-800) !important;
  box-shadow: 0 0 0 0.2rem rgba(33,150,243,.25);
}

/* File inputs */
input[type="file"] {
  border: 1px solid var(--blue-700);
}
input[type="file"]::-webkit-file-upload-button {
  background: var(--blue-700);
  color: var(--text-on-dark);
  border: none;
  padding: .5rem 1rem;
  border-radius: .25rem;
  cursor: pointer;
}
input[type="file"]::-webkit-file-upload-button:hover {
  background: var(--blue-800);
}

/* Textareas */
textarea:focus {
  border-color: var(--blue-700) !important;
  box-shadow: 0 0 0 0.2rem rgba(33,150,243,.2) !important;
}



/* === Form Elements — Blue Theme === */

/* Text inputs & textareas */
input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
input[type="password"], input[type="search"], input[type="number"],
textarea, select {
  border: 1px solid var(--border) !important;
  background: #fff !important;
  color: var(--text-strong) !important;
  border-radius: 10px !important;
  padding: .65rem .85rem !important;
  transition: border-color .2s ease, box-shadow .2s ease;
}

input::placeholder, textarea::placeholder { color: var(--muted) !important; }

input:focus, textarea:focus, select:focus {
  border-color: var(--blue-600) !important;
  box-shadow: 0 0 0 .2rem rgba(33,150,243,.18) !important;
  outline: none !important;
}

/* Checkbox & Radio — modern browsers */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--blue-700) !important;
}

/* Custom look for older browsers */
.form-check-input, .custom-control-input {
  accent-color: var(--blue-700) !important;
}

/* Toggle switches (common utility classes) */
.switch input:checked + .slider,
.form-switch .form-check-input:checked {
  background-color: var(--blue-700) !important;
  border-color: var(--blue-700) !important;
}

/* Select dropdown arrow color tweaks */
select {
  background-image:
    linear-gradient(45deg, transparent 50%, var(--blue-700) 50%),
    linear-gradient(135deg, var(--blue-700) 50%, transparent 50%),
    linear-gradient(to right, transparent, transparent);
  background-position:
    calc(100% - 20px) calc(1em + 2px),
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 2.5em) .5em;
  background-size: 5px 5px, 5px 5px, 1px 1.5em;
  background-repeat: no-repeat;
}

/* Range sliders */
input[type="range"] {
  -webkit-appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 9999px;
  background: linear-gradient(90deg, var(--blue-700), var(--blue-600));
  outline: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blue-700);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(25,118,210,.35);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blue-700);
  border: 2px solid #fff;
  box-shadow: 0 2px 6px rgba(25,118,210,.35);
  cursor: pointer;
}
input[type="range"]::-ms-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--blue-700);
  border: 2px solid #fff;
}

/* File inputs */
input[type="file"]::-file-selector-button {
  background: var(--blue-700);
  color: var(--text-on-dark);
  border: 1px solid var(--blue-700);
  border-radius: 8px;
  padding: .55rem .9rem;
  margin-right: .75rem;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
input[type="file"]::-file-selector-button:hover {
  background: var(--blue-800);
  border-color: var(--blue-800);
}

/* Validation states */
.is-valid, .was-validated .form-control:valid {
  border-color: #a7d0ff !important;
}
.is-invalid, .was-validated .form-control:invalid {
  border-color: #ff6b6b !important; /* keep red for clarity */
  box-shadow: 0 0 0 .2rem rgba(255,107,107,.15) !important;
}

